<template>
	<el-container>
		<el-main class="header">
			<font size="6" color="white">智能门诊HIS系统</font>
		</el-main>
		<el-container>
			<el-aside width="400px">
				<el-row class="tac">
					<el-col :span="24">
						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
							<el-submenu index="1" style="font-size: large;">
								<template slot="title">
									<i class="el-icon-location"></i>
									<font size="5">挂号管理</font>
								</template>
								<el-menu-item-group>
									<router-link to="/register" class="offLine">
										<el-menu-item index="1-1"> 现场挂号 </el-menu-item>
									</router-link>
									<router-link to="/returnReg" class="offLine">
										<el-menu-item index="1-2">现场退号</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>

							<el-submenu index="2" style="font-size: large;">
								<template slot="title">
									<i class="el-icon-location"></i>
									<font size="5">用药管理</font>
								</template>
								<el-menu-item-group>
									<router-link to="/drug" class="offLine">
										<el-menu-item index="2-1">用药处方</el-menu-item>
									</router-link>
									
									<router-link to="/druginformation" class="offLine">
									<el-menu-item index="2-2">药物信息</el-menu-item>
									</router-link>
									
									
									<router-link to="/model" class="offLine">
									<el-menu-item index="2-3">药物模板</el-menu-item>
									</router-link>
									
								</el-menu-item-group>
							</el-submenu>
							
							<router-link to="/jianYan" class="offLine">
							<el-menu-item index="3">
								<i class="el-icon-document"></i>
								<span slot="title">检验管理</span>
							</el-menu-item>
							</router-link>
							

							<router-link to="/hospitalization" class="offLine">
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">住院管理</span>
								</el-menu-item>
							</router-link>

							<el-submenu index="5" style="font-size: large;">
								<template slot="title">
									<i class="el-icon-location"></i>
									<font size="5">科室管理</font>
								</template>
								<el-menu-item-group>
									<router-link to="/paiBan" class="offLine">
									<el-menu-item index="5-1">科室界面</el-menu-item>
									</router-link>
									
									<router-link to="/schedulingMain" class="offLine">
										<el-menu-item index="5-2">排班界面</el-menu-item>
									</router-link>
									
									<router-link to="/arrange" class="offLine">
										<el-menu-item index="5-3">添加规则</el-menu-item>
									</router-link>
									
									<router-link to="/arrangeClass" class="offLine">
										<el-menu-item index="5-4">排班详细</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>

							<el-submenu index="6" style="font-size: large;">
								<template slot="title">
									<i class="el-icon-location"></i>
									<font size="5">财务管理</font>
								</template>
								<el-menu-item-group>
									<router-link to="/financeIn" class="offLine">
										<el-menu-item index="6-1">收费</el-menu-item>
									</router-link>
									<router-link to="/financeOut" class="offLine">
										<el-menu-item index="6-2">退费</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>

							<el-submenu index="7" style="font-size: large;">
								<template slot="title">
									<i class="el-icon-location"></i>
									<font size="5">药房管理</font>
								</template>
								<el-menu-item-group>

									<router-link to="/medicineIn" class="offLine">
										<el-menu-item index="7-1">发药</el-menu-item>
									</router-link>

									<router-link to="/medicineOut" class="offLine">
										<el-menu-item index="7-2">退药</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>
							
							<el-submenu index="8" style="font-size: large;">
								<template slot="title">
									<i class="el-icon-location"></i>
									<font size="5">门诊医生</font>
								</template>
								<el-menu-item-group>
							
									<router-link to="/menZhen" class="offLine">
										<el-menu-item index="7-1">排队叫号</el-menu-item>
									</router-link>
							
									<router-link to="/record" class="offLine">
										<el-menu-item index="7-2">病历信息</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>
						  
						</el-menu>
					</el-col>
				</el-row>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
		<el-footer></el-footer>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				tabsItem: [],
			}
		},

		methods: {
			clickMenu(componentName) {
				this.openedTab = this.$store.state.openedTab
				// tabNum 为当前点击的列表项在openedTab中的index，若不存在则为-1
				let tabNum = this.openedTab.indexOf(componentName)
				if (tabNum === -1) {
					// 该标签当前没有打开
					// 将componentName加入到已打开标签页state.openedTab数组中
					this.$store.commit('addTab', componentName)
				} else {
					// 该标签是已经打开过的，需要激活此标签页
					this.$store.commit('changeTab', componentName)
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-menu-vertical-demo {
		text-align: left;
		font-size: larger;
		padding: 20px;

	}

	.el-menu-item {
		text-align: left;
		font-size: larger;
		height: 60px;

	}

	.el-submenu {
		text-align: left;
		font-size: larger;
	}

	.header {
		background-color: #409EFF;
		padding: 30px;
		text-align: left;
	}

	.el-aside {
		width: 300px;
		background-color: #EDEBEB;
		height: 600px;
	}

	.offLine {
		text-decoration: none;
	}
</style>
